<template>
  <!-- <div> -->
  <div class="admin-box">
    <div :class="{'admin-el-menu':true,'admin-el-menu-hidden':isShowMenu}">
      <el-menu
        :default-active="$route.meta"
        background-color="#304156"
        text-color="#fff"
        :router="true"
        :collapse="isShowMenu"
        active-text-color="#409eff">
          <Menu :routers="routes"></Menu>
      </el-menu>
    </div>
    <section>
      <div class="nav-box">
        <el-button class="menu-btn" @click="isShowMenu=!isShowMenu" icon="el-icon-menu
  "></el-button>
        <Nav :menuList="menuList"></Nav>
      </div>
       <div class="admin-content">
        <router-view></router-view>
       </div>
    </section>
  </div>
  <!-- </div> -->
</template>

<script>
// import xHeader from "@/views/app/components/x-header/index";
import Menu from "./menu";
import Nav from "./nav";
import { mapActions, mapGetters } from "vuex";
import { rouerFormData } from "common/js/getRoute";
export default {
  name: "carrousel",
  // components: {
  //   xHeader
  // },
  data() {
    return {
      routers: [],
      menuList: [],
      ls: [],
      isShowMenu: false
    };
  },
  components: {
    Menu,
    Nav
  },
  computed: {
    ...mapGetters("admin", ["routes"])
  },
  created() {
    // console.log(this.$roote)
  },
  mounted() {
    // this.getMenuList();
    this.addRouters();
    this.saveAdminInfo("userInfo");
    // console.log('----jjsjdfjsdf')
    // this.getNavTitleList()
    // this.menu =  this.$rooter.options.routes
  },
  methods: {
    ...mapActions("admin", ["getNavTitleList", "saveAdminInfo","addRouters"]),

  }
};
</script>

<style lang="scss" rel="stylesheet/stylus">
body,
html,
#app {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0;
  .admin-box {
    display: flex;
    height: 100%;
    width:100%;
    .admin-el-menu {
      flex: 0 1 200px;
      height: 100%;
      background: #304156;
      // border-right:solid 1px #fff;
      // box-sizing: border-box;
      >ul{
        border-right: none;
      }
      .el-submenu {
        .el-menu-item {
          min-width: auto;
        }
      }
    }
    .admin-el-menu-hidden {
      flex: 0 1 40px;
      .el-menu--collapse {
        width: 40px;
        .el-submenu > .el-submenu__title {
          padding: 0 8px !important;
          > span {
            height: 0;
            width: 0;
            overflow: hidden;
            visibility: hidden;
            display: inline-block;
          }
        }
        .el-submenu__icon-arrow {
          display: none;
        }
      }
    }
    > section {
      flex:1 0 0%;
      overflow-y:scroll;
      > .nav-box {
        display: flex;
        align-items: center;
        padding-left: 15px;
        border-bottom: 1px solid #e6e6e6;
        .menu-btn {
          height: 30px;
          flex: 0 0 30px;
          padding: 0;
        }
        .admin-nav {
          flex: 1;
        }
      }
      > .admin-content {
        padding: 20px;
      }
    }
  }
}
</style>
